<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    [(${seo})]
    <!-- css -->
<!--     <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.min.css"/>-->
    <link rel="stylesheet" th:href="${staticPath}+ '/static/plugins/element-ui/2.15.14/index.min.css'"/>
    <link rel="stylesheet" th:href=" ${staticPath}+ '/static/assets/css/style.css'"/>
    <link rel="stylesheet" th:href=" ${staticPath}+ '/static/assets/css/home.css'"/>
    <link rel="stylesheet" th:href=" ${staticPath}+ '/static/assets/css/doc.css'"/>
    <link rel="stylesheet" th:href=" ${staticPath}+ '/static/plugins/v-md-editor/lib/theme/style/github.css'"/>
    <link rel="stylesheet" th:href=" ${staticPath}+ '/static/plugins/mobile-menu/css/mobile-menu.css'"/>
    <link rel="stylesheet" th:href=" ${staticPath}+ '/static/plugins/v-md-editor/lib/plugins/tip/tip.css'"/>
    <!-- js -->
    <script th:src="${staticPath}+ '/static/plugins/vue/vue.min.js'"></script>
    <script th:src="${staticPath}+ '/static/plugins/element-ui/2.15.14/index.min.js'"></script>
    <script th:src="${staticPath}+ '/static/plugins/jquery/jquery.min.js'"></script>
    <script th:src=" ${staticPath}+ '/static/assets/js/base.js'"></script>
    <script th:src=" ${staticPath}+ '/static/assets/util/xj-util.js'"></script>
    <script th:src=" ${staticPath}+ '/static/plugins/mobile-menu/js/mobile-menu.js'"></script>
    <script th:src=" ${staticPath}+ '/static/assets/js/doc.js'"></script>
</head>

<body>
<div id="app" v-cloak>
    <!-- 顶部 -->
    <div th:include="~{base/header :: header}" th:remove="tag"></div>

    <!-- 页面内容 -->
    <div class="xj-content-box-card">
        <!-- 左边树 -->
        <el-card class="box-card xj-docs-tree">
            <el-input
                    th:placeholder="${config.leftSearchTip}"
                    v-model="filterText">
            </el-input>
            <br>
            <br>
            <!--accordion-->
            <el-tree
                    class="filter-tree"
                    :data="docsTree"
                    :props="treeProps"
                    accordion
                    node-key="id"
                    :default-expanded-keys="defaultExpandedKeys"
                    :current-node-key="currentNodeKey"
                    :filter-node-method="filterNode"
                    @node-click="nodeClick"
                    ref="tree">
            </el-tree>
        </el-card>

        <!-- 内容 -->
        <el-card class="box-card xj-docs-info">
            <span id="docInfoName" hidden>[( ${docInfo.name} )]</span>
            <span id="docInfoType" hidden>[( ${docInfo.type} )]</span>
            <span id="docInfoId" hidden>[( ${docInfo.id} )]</span>
            <h1 id="title">[[ ${docInfo.name} ]]</h1>
            <span class="github-markdown-body">[( ${docInfo.contentHtml ==null || docInfo.contentHtml ==''? '暂无内容':  docInfo.contentHtml  } )]</span>
            <!--            <span>作者: 兮家小二 </span> &nbsp; &nbsp;-->
            <div class="updateTime"> 最后更新: &nbsp;[[ ${docInfo.updateTimeStr } ]]</div>
        </el-card>
        <!-- 文档导航 -->
        <div class="box-card xj-docs-next-tree-button">
             <span id="nextTreeA" hidden>
                    <i onclick="$('.xj-docs-next-tree').toggle(100),$('#nextTreeA').hide(),$('#nextTreeB').show()" class="el-icon-d-arrow-right"></i>
             </span>
            <span id="nextTreeB">
                  <i onclick="$('.xj-docs-next-tree').toggle(100),$('#nextTreeA').show(),$('#nextTreeB').hide()" class="el-icon-d-arrow-left"></i>
            </span>
        </div>
        <el-card class="box-card xj-docs-next-tree" hidden>
            <div class="xj-docs-next-menu"></div>
        </el-card>

        <!-- 回到顶部-->
        <a id="backToTop" hidden>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.484 28.284" class="go-to-top">
                <g transform="translate(-229 -126.358)">
                    <rect fill="currentColor" width="35" height="5" rx="2" transform="translate(229 151.107) rotate(-45)"></rect>
                    <rect fill="currentColor" width="35" height="5" rx="2" transform="translate(274.949 154.642) rotate(-135)"></rect>
                </g>
            </svg>
        </a>
    </div>
    <!-- 底部 -->
    <div th:include="~{base/bottom :: bottom}" th:remove="tag"></div>

    <el-dialog v-dialogDrag v-if="imgDialogVisible" :visible.sync="imgDialogVisible" :width="imgDialogWidth" :show-close="false" :center="true" :modal="true">
        <el-image :src="imageUrl" fit="contain"></el-image>
    </el-dialog>
</div>


<script>
    var vm = new Vue({
        // 绑定 id="app" 的元素
        el: "#app",
        // 定义数据
        data: {
            page: "doc",
            filterText: '',
            treeProps: {
                label: 'name',           // 标题字段
                children: 'children'     // 层级字段
            },
            // staticPrefix: "[[ ${page == 'index' ? './' : '../'} ]]",
            docsTree: {},
            // 当前选中
            currentNodeKey: document.getElementById("docInfoId").innerText,
            // 默认展开
            defaultExpandedKeys: document.getElementById("docInfoId").innerText,
            contentHtml: "",
            imgDialogWidth: "90%", // 图片宽度
            imgDialogVisible: false, // 图片弹出
            imageUrl: ""  // 弹出的图片访问地址
        },
        mounted() {
            // 1、左侧菜单数据加载
            // console.log("==========")
            let docsTrees = JSON.parse(document.getElementById("docsTree").innerText);
            let type = document.getElementById("docInfoType").innerText;
            this.docsTree = docsTrees [type];
        },
        methods: {
            /**
             * 点击左菜单查询文档
             * @param data
             */
            nodeClick(data) {
                // 目录不能点击
                if (data.showType == 1) {
                    return;
                }
                if (!isPc()) {
                    // 手机端打开选择后关闭菜单
                    let width = {width: '0'};
                    $('.xj-docs-tree').animate(width, 20);
                }
                // console.log("点击左侧导航");
                // 在原地址栏增加参数, 文档页是在第二层，所以退一层
                let url = "../" + encodeURIComponent(data.typeName) + "/" + encodeURIComponent(data.name) + ".html"
                // 更新地址栏url  console.log(url)
                location.href = url;
            },
            /**
             * 左菜单数据搜索
             * @param value
             * @param data
             * @returns {boolean}
             */
            filterNode(value, data) {
                if (!value) return true;
                return data.name.indexOf(value) !== -1;
            }
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
    })


    // 监听图片点击
    document.querySelectorAll('img').forEach(function (img) {
        img.addEventListener('click', function (event) {

            // 获取图片的宽度
            var imgWidth = event.target.naturalWidth;
            // console.log('Clicked image URL:', event.target.src);
            // 获取图片的访问地址
            vm.imgDialogWidth = imgWidth + "px";
            vm.imgDialogVisible = true;
            vm.imageUrl = event.target.src;
        });
    });


    $(function () {
        // 滚动定位标题 获取要滚动到的元素 / 将页面滚动到元素的位置
        var targetElement = document.getElementsByClassName('is-current');
         targetElement[0].scrollIntoView({behavior: 'auto',block: 'center'});
       // targetElement[0].parentElement.scrollTop += 50;
    })

</script>
<style>
    .el-tree-node.is-expanded.is-current.is-focusable > div > .el-tree-node__label {
        color: #FF0517;
    }
</style>

</body>
</html>
